<template>
  <div class="ek-page">
    <ekList
      :layoutData="layoutData"
      ref="refList"
    >
      <template v-slot:operate>
        <ekBtnGroup :buttons="buttons" @operate="handleOperate" />
      </template>
      <template #operateColumn="{ scope }">
        <ekBtnGroup
          mode="column"
          size="small"
          :buttons="columnButtons"
          @operate="(item) => handleOperate(item, scope)"
        />
      </template>
    </ekList>
    <Mode
      :title="title"
      :rowId="rowId"
      :disabled="disabled"
      v-model:visiable="visiable"
      @submit="confirm"
    />

  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import {
  configs,

  searchs,
  pages,
  columns,
  buttons,
  columnButtons,
  apis,
} from "./dataBill.js";

import ekList from "@/components/business/ekList/index.vue";
import ekBtnGroup from "@/components/business/ekList/components/ekBtnGroup.vue";
import Mode from "./components/Mode.vue";

defineComponent({
  name: "bill-index"  
})
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox } = globalProperties;

let refList = ref(null);
// 表格头部
let layoutData = ref({
  modelCode: "MODEL_BILL",
  configs,

  // 查询条件
  searchs: [
    ...searchs
  ],

  // 分页配置
  pages,
  // 按钮配置
  buttons,
  // 显示字段
  columns,
});


const visiable = ref(false);
const rowId = ref("");
const title = ref("");
const disabled = ref(false);
const handleOperate = (item, scope) => { 

  switch (item.operate) {
  
    case "detail":
      detail(scope);
      break;
    case "export":

      exports();
      break;
  }
};
const detail = (scope) => {
  title.value = "详情";
  rowId.value = scope.row.id;
  visiable.value = true;
  disabled.value = true;
};


const exports = () => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
   if (rows.length != 1) {
    $ekMessage.warning("每次只能导出一个账单数据");
    return;
  }
  let transfer_nos = rows.map((item) => item.transfer_no);
  doExports(transfer_nos);
};
const doExports = (transfer_nos) => {

  window.open('https://app.qinglanguoji.cn/'+apis.export + `&business_id=1&authCode=091e3d2b687ef8d21c777a93e0c7537f&transfer_nos=${transfer_nos.join(",")}`, "_blank");
};


const confirm = (done) => {
  refresh();
  done();
};
const refresh = () => {
  refList.value.refresh();
};
</script>
<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
</style>
